<template>
  <div>
    <item title="基础按钮">
        <f-button class="cell">基础按钮</f-button>
        <f-button class="cell" type="primary">主要按钮</f-button>
        <f-button class="cell" type="success">成功按钮</f-button>
        <f-button class="cell" type="warning">警告按钮</f-button>
        <f-button class="cell" type="danger">危险按钮</f-button>
    </item>

    <item title="按钮尺寸">
        <f-button class="cell" type="danger" size="mini">迷你按钮</f-button>
        <f-button class="cell" type="warning" size="small">小号按钮</f-button>
        <f-button class="cell" type="success">默认按钮</f-button>
        <f-button  type="primary" size="large">大号按钮</f-button>
    </item>

    <item title="线型按钮">
      <f-button class="cell" type="primary" plain>主要按钮</f-button>
      <f-button class="cell" type="success" plain>成功按钮</f-button>
      <f-button class="cell" type="warning" plain>警告按钮</f-button>
      <f-button class="cell" type="danger" plain>危险按钮</f-button>
    </item>

    <item title="圆角按钮">
      <f-button class="cell" type="success" round>圆角按钮</f-button>
      <f-button class="cell" type="danger" plain round>圆角按钮</f-button>
    </item>

    <item title="直角按钮">
      <f-button class="cell" type="success" square>直角按钮</f-button>
      <f-button class="cell" type="danger" plain square>直角按钮</f-button>
    </item>

    <item title="禁用状态">
       <f-button disabled type="success">禁用按钮</f-button>
    </item>

    <item title="块级按钮"> 
       <f-button type="success" block>块级按钮</f-button>
       <f-button type="danger" block>块级按钮</f-button>
    </item>

    <item title="图标按钮"> 
       <f-button class="cell" type="success" icon="search">图标按钮</f-button>
       <f-button class="cell" type="danger" plain square icon="search">直角按钮</f-button>
    </item>

    <item title="加载按钮"> 
       <f-button class="cell" type="success" square loading>加载中...</f-button>
       <f-button class="cell" type="success" square loading disabled>加载中...</f-button>
       <f-button class="cell" type="success" square plain loading>加载中...</f-button>
       <f-button class="cell" type="success" square loading plain disabled>加载中...</f-button>
    </item>

    <item title="URL跳转"> 
       <f-button type="success" url="https://gitee.com/funren/fast-ui">url 跳转按钮</f-button>
    </item>

    <item title="路由跳转"> 
      <f-button type="success" to="/icon">路由跳转按钮</f-button>
    </item>

    <item title="自定义按钮"> 
      <f-button class="cell" color="#fff" background="#000" border="#000">自定义样式</f-button>
      <f-button class="cell" color="#000" border="#000" plain>自定义样式</f-button>
      <f-button class="cell" color="#fff" background="#00bbff" border="#00bbff" plain square>自定义样式</f-button>
      <f-button class="cell" color="#00bbff" border="#00bbff" square>自定义样式</f-button>
      <f-button class="cell" color="#fff" background="#ff00ff" border="#ff00ff" round>自定义样式</f-button>
      <f-button class="cell" color="#ff00ff" border="#ff00ff" plain round>自定义样式</f-button>

    </item>

    <item title="绑定事件"> 
      <f-button type="danger" square  @click="Hello">按钮触发事件</f-button>
    </item>
  </div>
</template>

<script>
import Item from '../components/Item.vue'
export default {
  name: 'Button',
  components: {
    Item,
  },
  methods:{
    Hello:function(){
      alert('Hello')
    }
  },
}
</script>

<style lang="scss" scoped>
  .cell {
    margin:0 15px 10px 0;
  }
</style>
